<!DOCTYPE html>
<html>

<head>
    <title>wnr</title>
    <meta charset="UTF-8" />
    <meta http-equiv="Content-Type" content="text/html" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
    <link rel="preload" as="style" href="loader.css" onload="this.rel='stylesheet'">
    <!-- loader style preload -->
    <script>
        window.$ = require("jquery/dist/jquery.slim.min.js");
    </script>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="res/fonts/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

    <!-- loader -->
    <div id="loader-wrapper">
        <div id="loader"></div>
        <div class="loader-section section-left"></div>
        <div class="loader-section section-right"></div>
    </div>
    <script>
        window.onload = function () {
            $("body").addClass("loaded");
            setTimeout(function () {
                $('#loader-wrapper').remove()
            }, 1000);
        }
    </script>

    <!-- makes the window resizable -->
    <div class="header-resize"></div>
    <div class="left-resize"></div>
    <div class="right-resize"></div>
    <div class="bottom-resize"></div>

    <script src="supporter.js"></script><!-- support wnr running -->

    <div class="d-flex mx-auto justify-content-center align-items-center text-dark" id="main">
        <div id="statistics-back">
            <a href="javascript:backer()" class="rest"><i class="iconfont icon-angle-left" id="back-index"></i></a>
        </div>
        <div id="controller">
            <a href="javascript:getHelp('guide/3-statistics')" class="small rest"><i class="iconfont icon-info"
                                                                                     id="helper"></i></a>&nbsp;&nbsp;
            <a href="javascript:call('window-hide')" class="small rest" id="win-hider"><i
                    class="iconfont icon-dockpanel" id="window-hide"></i></a><span
                id="no-use-space">&nbsp;&nbsp;</span>
            <a href="javascript:call('window-minimize')" class="small rest"><i class="iconfont icon-minus"
                                                                               id="window-minimize"></i></a><span
                class="should-lock">&nbsp;&nbsp;</span>
            <a href="javascript:call('window-close-chk')" class="small rest should-lock"><i
                    class="iconfont icon-close"
                    id="exit"></i></a>
            <script>
                $('#helper').attr('title', i18n.__('helper'));
                $('#back-index').attr('title', i18n.__('back'));
                $('#window-hide').attr('title', i18n.__('window-hide'));
                $('#window-minimize').attr('title', i18n.__('window-minimize'));
                $('#exit').attr('title', i18n.__('exit'));
                if (process.platform === "darwin") $("#controller").css("display", "none");
            </script>
        </div>
        <div id="top-bar" class="extreme-small">
            <a id="today" href="javascript:switchMode('today')">
                <script>document.write(i18n.__('today'));</script>
            </a> | <a id="yesterday" href="javascript:switchMode('yesterday')">
            <script>document.write(i18n.__('yesterday'));</script>
        </a> | <a id="this-week" href="javascript:switchMode('this-week')">
            <script>document.write(i18n.__('this-week'));</script>
        </a> | <a id="this-year" href="javascript:switchMode('this-year')">
            <script>document.write(i18n.__('this-year'));</script>
        </a>
            | <a id="all-time" href="javascript:switchMode('all-time')">
            <script>document.write(i18n.__('all-time'));</script>
        </a>
            <hr />
        </div>
        <div id="statistics-no-chart">
            <br />
            <table width="100%" style="line-height: 2.5">
                <tbody>
                    <tr>
                        <td>
                            <span class="small">
                <script>document.write(i18n.__('statistics-work-time'));</script>
            </span><br />
                            <h3 class="rest">
                                <span id="work-time">--</span>
                            </h3>
                        </td>
                        <td>
                            <span class="small">
                <script>document.write(i18n.__('statistics-rest-time'));</script>
            </span><br />
                            <h3 class="work">
                                <span id="rest-time">--</span>
                            </h3>
                        </td>
                    </tr>
                    <tr>&nbsp;</tr>
                    <tr>
                        <td>
                            <span class="small">
                <script>document.write(i18n.__('statistics-onlyrest-time'));</script>
            </span><br />
                            <h3 class="onlyRest">
                                <span id="onlyrest-time">--</span>
                            </h3>
                        </td>
                        <td>
                            <span class="small">
                <script>document.write(i18n.__('statistics-positive-time'));</script>
            </span><br />
                            <h3 class="positive">
                                <span id="positive-time">--</span>
                            </h3>
                        </td>
                    </tr>
                    <tr>&nbsp;</tr>
                </tbody>
            </table>
            <span class="small">
                <script>document.write(i18n.__('statistics-time-sum'));</script>
            </span><br />
            <h2 class="text-muted">
                <span id="sum">--</span>
            </h2>
        </div>
        <div id="statistics-with-chart">
            <br />
            <div class="container small" style="padding: 0">
                <div class="row">
                    <div class="col" style="padding: 0">
                        <span class="xx-small">
                            <script>document.write(i18n.__('statistics-work-time'));</script>
                        </span><br />
                        <b class="rest">
                            <span id="work-time-with-chart">--</span>
                        </b>
                    </div>
                    <div class="col" style="padding: 0">
                        <span class="xx-small">
                            <script>document.write(i18n.__('statistics-rest-time'));</script>
                        </span><br />
                        <b class="work">
                            <span id="rest-time-with-chart">--</span>
                        </b>
                    </div>
                    <div class="col" style="padding: 0">
                        <span class="xx-small">
                            <script>document.write(i18n.__('statistics-onlyrest-time'));</script>
                        </span><br />
                        <b class="onlyRest">
                            <span id="only-rest-time-with-chart">--</span>
                        </b>
                    </div>
                    <div class="col" style="padding: 0">
                        <span class="xx-small">
                            <script>document.write(i18n.__('statistics-positive-time'));</script>
                        </span><br />
                        <b class="positive">
                            <span id="positive-time-with-chart">--</span>
                        </b>
                    </div>
                    <div class="col" style="padding: 0">
                        <span class="xx-small">
                            <script>document.write(i18n.__('statistics-time-sum'));</script>
                        </span><br />
                        <b class="text-muted">
                            <span id="sum-with-chart">--</span>
                        </b>
                    </div>
                </div>
            </div>
            <hr />
            <div id="statistics-graph">
                <canvas id="graph"></canvas>
            </div>
        </div>
    </div>

    <script>
        isTimerWindow(false);
        if (process.platform === "darwin") {
            $("#win-hider").css("display", "none");
            $("#no-use-space").css("display", "none");
        }

        function backer() {
            window.location.href = "index.html";
        }

        const schart = require("schart.js");
        let statistics = null;

        if (process.env.NODE_ENV === "portable") {
            statistics = new Store({
                cwd: require('@electron/remote').app.getPath('exe').replace("wnr.exe", ""),
                name: 'wnr-statistics'
            });
        } else {
            statistics = new Store({ name: 'statistics' });
        }

        if (!store.has("start-from-monday")) {
            const { dialog } = require('@electron/remote');
            dialog.showMessageBox({
                title: " wnr",
                type: "warning",
                message: i18n.__("start-from-which-day"),
                detail: i18n.__("can-be-modified-in-settings-later"),
                buttons: [i18n.__('dropdown-from-monday'), i18n.__('dropdown-from-sunday'), i18n.__('cancel')],
                cancelId: 2,//buttons map different from darwin to other OSs
                noLink: true
            }).then(function (index) {
                store.set("start-from-monday", index.response === 0);
                location.reload();
            });
        }

        let nowDate = new Date();//get date and have preparations
        let months = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'];
        statistics.set("year", nowDate.getFullYear().toString());
        statistics.set("mon", months[nowDate.getMonth()]);//"mon" represents month
        statistics.set("day", nowDate.getDate().toString());
        let yearAndMon = statistics.get("year") + statistics.get("mon");
        let yearMonDay = statistics.get("year") + statistics.get("mon") + statistics.get("day");

        let yesterdayDate = new Date();//get yesterday info
        yesterdayDate.setDate(yesterdayDate.getDate() - 1);
        let yesterdayYearMonDay = yesterdayDate.getFullYear().toString() + months[yesterdayDate.getMonth()] + yesterdayDate.getDate().toString();

        function getDayCustomizable(date) {
            if (!store.get("start-from-monday")) return date.getDay();
            else {
                if (date.getDay() === 0) return 6;
                else return date.getDay() - 1;
            }
        }

        function num(val) {
            if (val === undefined) return 0;
            else if (isNaN(Number(val))) return 0;
            else return val;
        }

        let thisWeekDate = new Date();//get info about this week
        thisWeekDate.setDate(thisWeekDate.getDate() - getDayCustomizable(thisWeekDate));
        let thisWeekWorkTimeSum = 0, thisWeekRestTimeSum = 0, thisWeekTimeSum = 0, thisWeekOnlyRestTimeSum = 0,
                thisWeekPositiveTimeSum = 0;
        let weekDayYearMonDay;
        let thisWeekWorkTimes = [0, 0, 0, 0, 0, 0, 0], thisWeekRestTimes = [0, 0, 0, 0, 0, 0, 0];
        let thisWeekWorkTimesInHour = [0, 0, 0, 0, 0, 0, 0], thisWeekRestTimesInHour = [0, 0, 0, 0, 0, 0, 0];
        let thisWeekOnlyRestTimes = [0, 0, 0, 0, 0, 0, 0],
                thisWeekOnlyRestTimesInHour = [0, 0, 0, 0, 0, 0, 0];
        let thisWeekPositiveTimes = [0, 0, 0, 0, 0, 0, 0],
                thisWeekPositiveTimesInHour = [0, 0, 0, 0, 0, 0, 0];
        for (let weekDay = 0; weekDay < 7; weekDay++) {
            weekDayYearMonDay = thisWeekDate.getFullYear().toString() + months[thisWeekDate.getMonth()] + thisWeekDate.getDate().toString();
            thisWeekWorkTimeSum += statistics.has(weekDayYearMonDay) ? statistics.get(weekDayYearMonDay).workTime : 0;
            thisWeekWorkTimes[weekDay] = statistics.has(weekDayYearMonDay) ? statistics.get(weekDayYearMonDay).workTime : 0;
            thisWeekWorkTimesInHour[weekDay] = Math.round((thisWeekWorkTimes[weekDay] / 60) * 10) / 10;
            thisWeekRestTimeSum += statistics.has(weekDayYearMonDay) ? statistics.get(weekDayYearMonDay).restTime : 0;
            thisWeekRestTimes[weekDay] = statistics.has(weekDayYearMonDay) ? statistics.get(weekDayYearMonDay).restTime : 0;
            thisWeekRestTimesInHour[weekDay] = Math.round((thisWeekRestTimes[weekDay] / 60) * 10) / 10;
            thisWeekOnlyRestTimes[weekDay] = statistics.has(weekDayYearMonDay) ? num(statistics.get(weekDayYearMonDay).onlyRest) : 0;
            thisWeekOnlyRestTimesInHour[weekDay] = Math.round((thisWeekOnlyRestTimes[weekDay] / 60) * 10) / 10;
            thisWeekOnlyRestTimeSum += statistics.has(weekDayYearMonDay) ? num(statistics.get(weekDayYearMonDay).onlyRest) : 0;
            thisWeekPositiveTimes[weekDay] = statistics.has(weekDayYearMonDay) ? num(statistics.get(weekDayYearMonDay).positive) : 0;
            thisWeekPositiveTimesInHour[weekDay] = Math.round((thisWeekPositiveTimes[weekDay] / 60) * 10) / 10;
            thisWeekPositiveTimeSum += statistics.has(weekDayYearMonDay) ? num(statistics.get(weekDayYearMonDay).positive) : 0;
            thisWeekTimeSum += statistics.has(weekDayYearMonDay) ? statistics.get(weekDayYearMonDay).sum : 0;

            thisWeekDate.setDate(thisWeekDate.getDate() + 1);
        }

        let monthYearAndMon;//get info about this year
        let thisYearWorkTimes = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                thisYearRestTimes = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
        let thisYearWorkTimesInHour = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                thisYearRestTimesInHour = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
        let thisYearOnlyRestTimes = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                thisYearOnlyRestTimesInHour = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
        let thisYearPositiveTimes = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                thisYearPositiveTimesInHour = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
        for (let monthVar = 0; monthVar < 12; monthVar++) {
            monthYearAndMon = statistics.get("year") + months[monthVar];
            thisYearWorkTimes[monthVar] = statistics.has(monthYearAndMon) ? statistics.get(monthYearAndMon).workTime : 0;
            thisYearWorkTimesInHour[monthVar] = Math.floor(thisYearWorkTimes[monthVar] / 60);
            thisYearRestTimes[monthVar] = statistics.has(monthYearAndMon) ? statistics.get(monthYearAndMon).restTime : 0;
            thisYearRestTimesInHour[monthVar] = Math.floor(thisYearRestTimes[monthVar] / 60);
            thisYearOnlyRestTimes[monthVar] = statistics.has(monthYearAndMon) ? num(statistics.get(monthYearAndMon).onlyRest) : 0;
            thisYearOnlyRestTimesInHour[monthVar] = Math.floor(thisYearOnlyRestTimes[monthVar] / 60);
            thisYearPositiveTimes[monthVar] = statistics.has(monthYearAndMon) ? num(statistics.get(monthYearAndMon).positive) : 0;
            thisYearPositiveTimesInHour[monthVar] = Math.floor(thisYearPositiveTimes[monthVar] / 60);
        }

        let allTimeWorkTimeSum = 0, allTimeRestTimeSum = 0,
                allTimeOnlyRestTimeSum = 0, allTimePositiveTimeSum = 0,
                allTimeTimeSum = 0;//get info about all time
        let yearVar = Number(statistics.get("year"));
        while (yearVar) {
            if (statistics.has(yearVar.toString())) {
                allTimeWorkTimeSum += statistics.get(yearVar.toString()).workTime;
                allTimeRestTimeSum += statistics.get(yearVar.toString()).restTime;
                allTimeOnlyRestTimeSum += num(statistics.get(yearVar.toString()).onlyRest);
                allTimePositiveTimeSum += num(statistics.get(yearVar.toString()).positive);
                allTimeTimeSum += statistics.get(yearVar.toString()).sum;
                yearVar--;
            } else break;
        }

        let statisticsMode = "today";
        $(function () {
            switchMode(statisticsMode);
        });

        let h = i18n.__("h"), min = i18n.__("min");

        function getStyledTime(minute) {
            let hour = Math.floor(minute / 60);
            if (hour > 0) return hour + h + (minute - hour * 60) + min;
            else return minute + min;
        }

        function switchMode(mode) {
            statisticsMode = mode;
            if (statisticsMode === "today") {
                $("#today").css("font-weight", "bold");
                $("#yesterday").css("font-weight", "normal");
                $("#this-week").css("font-weight", "normal");
                $("#this-year").css("font-weight", "normal");
                $("#all-time").css("font-weight", "normal");

                $("#statistics-with-chart").css("display", "none");
                $("#statistics-no-chart").css("display", "block");

                $("#work-time").text(getStyledTime(statistics.has(yearMonDay) ? statistics.get(yearMonDay).workTime : "0"));
                $("#rest-time").text(getStyledTime(statistics.has(yearMonDay) ? statistics.get(yearMonDay).restTime : "0"));
                $("#onlyrest-time").text(getStyledTime(statistics.has(yearMonDay) ? num(statistics.get(yearMonDay).onlyRest) : "0"));
                $("#positive-time").text(getStyledTime(statistics.has(yearMonDay) ? num(statistics.get(yearMonDay).positive) : "0"));
                $("#sum").text(getStyledTime(statistics.has(yearMonDay) ? statistics.get(yearMonDay).sum : "0"));
            } else if (statisticsMode === "yesterday") {
                $("#today").css("font-weight", "normal");
                $("#yesterday").css("font-weight", "bold");
                $("#this-week").css("font-weight", "normal");
                $("#this-year").css("font-weight", "normal");
                $("#all-time").css("font-weight", "normal");

                $("#statistics-with-chart").css("display", "none");
                $("#statistics-no-chart").css("display", "block");

                $("#work-time").text(getStyledTime(statistics.has(yesterdayYearMonDay) ? statistics.get(yesterdayYearMonDay).workTime : "0"));
                $("#rest-time").text(getStyledTime(statistics.has(yesterdayYearMonDay) ? statistics.get(yesterdayYearMonDay).restTime : "0"));
                $("#onlyrest-time").text(getStyledTime(statistics.has(yesterdayYearMonDay) ? num(statistics.get(yesterdayYearMonDay).onlyRest) : "0"));
                $("#positive-time").text(getStyledTime(statistics.has(yesterdayYearMonDay) ? num(statistics.get(yesterdayYearMonDay).positive) : "0"));
                $("#sum").text(getStyledTime(statistics.has(yesterdayYearMonDay) ? statistics.get(yesterdayYearMonDay).sum : "0"));
            } else if (statisticsMode === "this-week") {
                $("#today").css("font-weight", "normal");
                $("#yesterday").css("font-weight", "normal");
                $("#this-week").css("font-weight", "bold");
                $("#this-year").css("font-weight", "normal");
                $("#all-time").css("font-weight", "normal");

                $("#statistics-with-chart").css("display", "block");
                $("#statistics-no-chart").css("display", "none");

                $("#work-time-with-chart").text(getStyledTime(thisWeekWorkTimeSum));
                $("#rest-time-with-chart").text(getStyledTime(thisWeekRestTimeSum));
                $("#only-rest-time-with-chart").text(getStyledTime(num(thisWeekOnlyRestTimeSum)));
                $("#positive-time-with-chart").text(getStyledTime(num(thisWeekPositiveTimeSum)));
                $("#sum-with-chart").text(getStyledTime(thisWeekTimeSum));

                let options = {
                    type: 'line',
                    legend: {
                        display: false
                    },
                    bgColor: isDarkMode ? '#191919' : '#ffffff',
                    labels: store.get("start-from-monday")
                            ? ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun']
                            : ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'],
                    topPadding: 19,
                    bottomPadding: 39,
                    datasets: [{
                        fillColor: '#5490eacc',
                        data: thisWeekWorkTimesInHour
                    }, {
                        fillColor: '#ea5454cc',
                        data: thisWeekRestTimesInHour
                    }, {
                        fillColor: '#a26ae5cc',
                        data: thisWeekOnlyRestTimesInHour
                    }, {
                        fillColor: '#17a2b8cc',
                        data: thisWeekPositiveTimesInHour
                    }]
                }
                new schart('graph', options);//statistics graph
            } else if (statisticsMode === "this-year") {
                $("#today").css("font-weight", "normal");
                $("#yesterday").css("font-weight", "normal");
                $("#this-week").css("font-weight", "normal");
                $("#this-year").css("font-weight", "bold");
                $("#all-time").css("font-weight", "normal");

                $("#statistics-with-chart").css("display", "block");
                $("#statistics-no-chart").css("display", "none");

                $("#work-time-with-chart").text(getStyledTime(statistics.has(statistics.get("year")) ? statistics.get(statistics.get("year")).workTime : "0"));
                if ($("#work-time-with-chart").text().length >= 10) $("#work-time-with-chart").addClass("xx-small");
                $("#rest-time-with-chart").text(getStyledTime(statistics.has(statistics.get("year")) ? statistics.get(statistics.get("year")).restTime : "0"));
                if ($("#rest-time-with-chart").text().length >= 10) $("#rest-time-with-chart").addClass("xx-small");
                $("#only-rest-time-with-chart").text(getStyledTime((statistics.has(statistics.get("year")) ? num(statistics.get(statistics.get("year")).onlyRest) : "0")));
                if ($("#only-rest-time-with-chart").text().length >= 10) $("#only-rest-time-with-chart").addClass("xx-small");
                $("#positive-time-with-chart").text(getStyledTime((statistics.has(statistics.get("year")) ? num(statistics.get(statistics.get("year")).positive) : "0")));
                if ($("#positive-time-with-chart").text().length >= 10) $("#positive-time-with-chart").addClass("xx-small");
                $("#sum-with-chart").text(getStyledTime(statistics.has(statistics.get("year")) ? statistics.get(statistics.get("year")).sum : "0"));
                if ($("#sum-with-chart").text().length >= 10) $("#sum-with-chart").addClass("xx-small");

                let options = {
                    type: 'line',
                    legend: {
                        display: false
                    },
                    bgColor: isDarkMode ? '#191919' : '#ffffff',
                    labels: months,
                    xRorate: 45,
                    yEqual: 3,
                    topPadding: 19,
                    bottomPadding: 59,
                    showValue: false,
                    datasets: [{
                        fillColor: '#5490eacc',
                        data: thisYearWorkTimesInHour
                    }, {
                        fillColor: '#ea5454cc',
                        data: thisYearRestTimesInHour
                    }, {
                        fillColor: '#a26ae5cc',
                        data: thisYearOnlyRestTimesInHour
                    }, {
                        fillColor: '#17a2b8cc',
                        data: thisYearPositiveTimesInHour
                    }]
                }
                new schart('graph', options);//statistics graph
            } else if (statisticsMode === "all-time") {
                $("#today").css("font-weight", "normal");
                $("#yesterday").css("font-weight", "normal");
                $("#this-week").css("font-weight", "normal");
                $("#this-year").css("font-weight", "normal");
                $("#all-time").css("font-weight", "bold");

                $("#statistics-with-chart").css("display", "none");
                $("#statistics-no-chart").css("display", "block");

                $("#work-time").text(getStyledTime(allTimeWorkTimeSum));
                $("#rest-time").text(getStyledTime(allTimeRestTimeSum));
                $("#onlyrest-time").text(getStyledTime(allTimeOnlyRestTimeSum));
                $("#positive-time").text(getStyledTime(allTimePositiveTimeSum));
                $("#sum").text(getStyledTime(allTimeTimeSum));
            }
        }//to show the stuffs


    </script>
    <script src="renderer.js"></script>
</body>

</html>